import React, { Component } from 'react';
import {
  Image,
  StyleSheet,
  View,
  Animated,
  PropTypes,
  interpolatedColorAnimation
} from 'react-native';
import  MainScene from './Main.js'
export default class Welcome extends Component {

  constructor(props) {
    super(props);
    this.state = {
      _animatedValue: new Animated.Value(0.2), // init opacity 0
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <Animated.Image
          onLoadEnd={() => {
            Animated.timing(this.state._animatedValue, {
              toValue: 1,
              duration: 3000
            }).start()
          }}
          source={require('../image/welcome.png')} style={[styles.img, { opacity: this.state._animatedValue }]} />
      </View>
    );
  }

  //在UI初始化渲染结束后，系统自动调用此函数。主要是用于定时器、网络请求
  componentDidMount() {
    //设置定时器，相隔2s后切换到主页面
    setTimeout(
      () => {
        //页面的切换,用到无缝切换函数replace
        // console.log('aa')
        //ok !既然我们需要跳转~那么问题来了~我们需要给组件包装一个导航器。注意：一个APP只有一个导航器，即使导航里面的组件页面又存在导航，系统的diff算法只会认定后面的导航，也就是还是一个导航
        this.props.navigator.replace(
          {
            component: MainScene,   //切换到具体的板块
          }
        )
      }, 3000
    );
  }

}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ffffff'
  },
  img: {
    flex: 1,
    resizeMode: 'contain',
  }
})
